<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="set">设置</button>
    <button class="get">输出</button>
</body>
<script>
    // 使用cookie需要注意的问题?
    // 1. 有些浏览器在使用中文时，会出现乱码。
    //    在设置cookie时，通过encodeURIComponent 编码，在获取cookie时，通过decodeURIComponent 解码
    // 2.cookie 的内容是纯文本，即只能保存字符串数据。 如果存储其他类型的数据会隐式转字符串
    // 此时如果向存储数组和对象等复杂类型的数据 => 需要在设置Cookie时通过JSON.stringify() 转化为json字符串
    // 3. cookie存储在用户本地
    // 4. cookie不能跨浏览器
    // 5. cookie不能跨网站
    // 6. cookie 依赖于服务器环境 ，即设置和获取cookie时，要用 http / https 访问网页。火狐除外。 

    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function(){
        var arr = [1, 2, 3, 4];
        var obj = { a: 1, b: 2, c: 3 };

        setCookie("arr", JSON.stringify(arr));
        setCookie("obj", JSON.stringify(obj));

        console.log(arr,JSON.stringify(arr));
        console.log(obj,JSON.stringify(obj));
    }
    get.onclick = function () {
        // 中文
        // var enStr = getCookie("user");
        // var user = decodeURIComponent(enStr);
        // console.log(user);

        var arrStr = getCookie("arr");
        var objStr = getCookie("obj");

        console.log(arrStr);
        console.log(objStr);

        var arr = JSON.parse(arrStr);
        var obj = JSON.parse(objStr);
        // console.log(arr,obj);
    }

    function setCookie(key , val , day , path = "/"){
        if(day != undefined){
            var date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
        }else{
            document.cookie = key + "=" + val + ";path=" + path;
        }
    }

    function getCookie(key){
        // debugger;
        var cookie = document.cookie;
        if(cookie){
            var list = cookie.split("; ");//;后面有个空格*************
            for(var i = 0 ; i < list.length ; i++){
                var item = list[i];
                var attr = item.split("=")[0];
                var val = item.split("=")[1];
                if(key === attr){
                    return val;
                }
            }
        }
        return "";
    }


    // 2. cookie 的内容是纯文本，即只能保存字符串数据。 如果存储其他类型的数据会隐式转字符串
    // 此时如果向存储数组和对象等复杂类型的数据 => 怎么办?

    // 有没有特殊的方法 可以在保留数组和对象结构的前提下 把它转化为字符串

    // JSON对象的方法
    // JSON.stringify()   将数组和对象转化为JSON字符串(可以在保留数组和对象结构的前提下 把它转化为字符串)
    // JSON.parse()     将JSON类型的字符串转化为对应结构的数组和对象

    // 注意:  JSON.stringify()  JSON.parse()  配合可以实现数组/对象深复制

    // var arr = [1, 2, 3, 4];
    // var obj = { a: 1, b: 2, c: 3 };

    // 数组和对象隐式 /强制转化为字符串的结果
    // console.log(String(arr));  // 1,2,3,4
    // console.log(String(obj));  // '[object Object]' 

    // 有没有特殊的方法 可以在保留数组和对象结构的前提下 把它转化为字符串(json字符串/json数据 )  JSON.stringify()
    /* var arr = [1, 2, 3, 4];  // '[1, 2, 3, 4]'
    var obj = { a: 1, b: 2, c: 3 }; // '{ a: 1, b: 2, c: 3 }'

    console.log(JSON);

    var arr_str = JSON.stringify(arr);
    console.log(1, arr_str);  // '[1, 2, 3, 4]'
    var obj_str = JSON.stringify(obj);
    console.log(1, obj_str);  // '{"a":1,"b":2,"c":3}'

    // 解析
    var arr1 = JSON.parse(arr_str);
    console.log(arr1, arr === arr1);
    var obj1 = JSON.parse(obj_str);
    console.log(obj1, obj === obj1); */
</script>
</html>